<template>
    <div class="app">
        <NuxtLayout name="app">
            <div class="text-center m-auto max-w-[600px]">
                <h2
                    class="pb-[24px] pt-[6px] px-[24px] font-bold text-center leading-[1.1] break-all text-[38px] mt-16"
                >
                    100+画家与设计师帮你绘图
                </h2>
                <div class="text-[#838a95] mb-10">
                    <el-popover>
                        <div>这是图片</div>
                        <template #reference>
                            <span>
                                <i class="iconfont icon-douyin" />关注抖音更新
                            </span>
                        </template>
                    </el-popover>
                    <span>
                        <i class="iconfont icon-douyin ml-8" />
                        提交你的需求
                    </span>
                </div>
            </div>

            <div class="max-w-[1520px] w-[80%]" style="margin: 0 auto">
                <ul class="flex mt-2 flex-wrap justify-center">
                    <li
                        v-for="i in cateLists"
                        :key="i.id"
                        @click="changeCategory(i.id)"
                        class="tab flex-shrink-0 cursor-pointer bg-white text-gray-DEEP mb-3"
                        :class="{
                            'active-category': i.id === queryParams.category_id
                        }"
                    >
                        {{ i.name }}
                    </li>
                </ul>
            </div>
            <div class="max-w-[1520px] m-auto w-[90%] min-w-[1100px] mt-[36px]">
                <el-empty
                    v-show="!pager.lists.length && !pager.loading"
                    class="mt-[50px]"
                    :image-size="250"
                    :image="EmptyIcon"
                    description="暂时没有绘画哦，快去生成试试吧"
                />
                <div v-if="pager.lists.length" class="square-wrapper">
                    <div
                        v-for="i in pager.lists"
                        :key="i.id"
                        class="relative"
                        @click="handleDrawer(i)"
                    >
                        <img :src="i.image" lazy />
                        <div class="desc">{{ i.source_desc }}</div>
                    </div>
                </div>
                <!--                    <div v-if="pager.lists.length">-->
                <!--                        <Waterfall-->
                <!--                            ref="waterFull"-->
                <!--                            :list="pager.lists"-->
                <!--                            :width="326"-->
                <!--                            :gutter="20"-->
                <!--                            :crossOrigin="false"-->
                <!--                            :lazyload="true"-->
                <!--                            :animationDelay="50"-->
                <!--                            :animationDuration="50"-->
                <!--                            backgroundColor="none"-->
                <!--                            :breakpoints="breakpoints"-->
                <!--                        >-->
                <!--                            <template #item="{ item, index }">-->
                <!--                                <div-->
                <!--                                    class="image-payload h-full w-full relative text-sm"-->
                <!--                                    @click="handleDrawer(item)"-->
                <!--                                >-->
                <!--                                    <div class="image-bg">-->
                <!--                                        <image-contain-->
                <!--                                            :radius="12"-->
                <!--                                            height="100%"-->
                <!--                                            fit="cover"-->
                <!--                                            :lazy="false"-->
                <!--                                            :src="item.thumbnail || item?.image"-->
                <!--                                            :preview-teleported="true"-->
                <!--                                            :preview-src-list="[item?.image]"-->
                <!--                                            :hide-on-click-modal="true"-->
                <!--                                            @load="renderer"-->
                <!--                                        >-->
                <!--                                            <template #error>-->
                <!--                                                <img-->
                <!--                                                    :src="ErrorIcon"-->
                <!--                                                    alt="加载错误"-->
                <!--                                                />-->
                <!--                                            </template>-->
                <!--                                            <template #placeholder>-->
                <!--                                                <img-->
                <!--                                                    :src="LoadingIcon"-->
                <!--                                                    alt="加载中"-->
                <!--                                                />-->
                <!--                                            </template>-->
                <!--                                        </image-contain>-->
                <!--                                    </div>-->
                <!--                                    <div class="image-content">-->
                <!--                                        <p class="text-white line-clamp-3">-->
                <!--                                            {{ item.prompts }}-->
                <!--                                        </p>-->
                <!--                                        <div-->
                <!--                                            class="flex justify-between mt-[10px]"-->
                <!--                                        >-->
                <!--                                            <div class="flex items-center">-->
                <!--                                                <template-->
                <!--                                                    v-if="-->
                <!--                                                        appStore-->
                <!--                                                            .getDrawSquareConfig-->
                <!--                                                            .is_show_user-->
                <!--                                                    "-->
                <!--                                                >-->
                <!--                                                    <ElAvatar-->
                <!--                                                        :size="28"-->
                <!--                                                        :src="-->
                <!--                                                            item?.user_info-->
                <!--                                                                ?.image-->
                <!--                                                        "-->
                <!--                                                    ></ElAvatar>-->
                <!--                                                    <p-->
                <!--                                                        class="text-[#BBBBBB] ml-[6px] w-[100px] truncate"-->
                <!--                                                    >-->
                <!--                                                        {{-->
                <!--                                                            item.user_info.name-->
                <!--                                                        }}-->
                <!--                                                    </p>-->
                <!--                                                </template>-->
                <!--                                            </div>-->
                <!--                                            <div-->
                <!--                                                class="flex items-center"-->
                <!--                                                @click="copy(item.prompts)"-->
                <!--                                            >-->
                <!--                                                <ElImage-->
                <!--                                                    class="w-[16px] h-[16px]"-->
                <!--                                                    :src="CopyIcon"-->
                <!--                                                ></ElImage>-->
                <!--                                                <p class="text-white ml-[6px]">-->
                <!--                                                    复制-->
                <!--                                                </p>-->
                <!--                                            </div>-->
                <!--                                        </div>-->
                <!--                                    </div>-->
                <!--                                </div>-->
                <!--                            </template>-->
                <!--                        </Waterfall>-->
                <!--                        <div-->
                <!--                            v-if="pager.loading"-->
                <!--                            class="flex justify-center items-center mt-[50px]"-->
                <!--                        >-->
                <!--                            <el-icon size="25" class="is-loading"-->
                <!--                                ><Loading-->
                <!--                            /></el-icon>-->
                <!--                            <span class="mt-[4px] ml-[10px] text-[#999999]"-->
                <!--                                >加载中...</span-->
                <!--                            >-->
                <!--                        </div>-->
                <!--                        <div-->
                <!--                            v-if="!pager.more && !pager.loading"-->
                <!--                            class="flex justify-center items-center mt-[50px]"-->
                <!--                        >-->
                <!--                            <span class="mt-[4px] ml-[10px] text-[#999999]">-->
                <!--                                -&#45;&#45; 没有更多了 -&#45;&#45;-->
                <!--                            </span>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                    <div id="observer-line" class="h-[100px]"></div>-->
            </div>

            <!--            <div class="nav flex mt-[30px]">-->
            <!--                <div-->
            <!--                    class="text-[18px] text-[#333333] font-medium leading-[40px]"-->
            <!--                >-->
            <!--                    分类：-->
            <!--                </div>-->
            <!--                <div class="category-list flex-1 ml-[10px]">-->
            <!--                    <div-->
            <!--                        v-for="(item, index) in cateLists"-->
            <!--                        :key="item.id"-->
            <!--                        class="category-item"-->
            <!--                        :class="{-->
            <!--                            'category-item&#45;&#45;active':-->
            <!--                                item.id === queryParams.category_id-->
            <!--                        }"-->
            <!--                        @click="changeCategory(item.id)"-->
            <!--                    >-->
            <!--                        {{ item.name }}-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="h-[60px]"></div>
        </NuxtLayout>
    </div>
</template>
<script setup lang="ts">
import { Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
import CopyIcon from '@/assets/images/icon_copy_white.png'
import EmptyIcon from '@/assets/images/empty_news.png'
import ErrorIcon from '@/assets/images/square_err.png'
import LoadingIcon from '@/assets/images/square_loading.png'
import { getDrawSquareLists, getDrawSquareCateLists } from '~/api/square'
import { Loading } from '@element-plus/icons-vue'
import { useCopy } from '~/composables/useCopy'
import { useAppStore } from '~/stores/app'
import { ElInput } from 'element-plus'
const { copy } = useCopy()
const appStore = useAppStore()

definePageMeta({
    auth: true,
    layout: 'app'
})

interface QueryParamsType {
    keyword: number | string
    page_no: number
    page_size: number
    category_id: number | string
}

// const observer = shallowRef<any>(null)
const waterFull = shallowRef<any>(null)
const queryParams = reactive<QueryParamsType>({
    keyword: '',
    page_no: 0,
    page_size: 20,
    category_id: ''
})
const pager = reactive({
    more: true,
    loading: true,
    lists: []
})
const cateLists = ref<any[]>([{ name: '全部', id: '' }])

// const breakpoints = {
//     2000: { rowPerView: 6 },
//     1800: { rowPerView: 5 },
//     1600: { rowPerView: 5 },
//     1440: { rowPerView: 4 },
//     1360: { rowPerView: 4 },
//     1280: { rowPerView: 3 },
//     1024: { rowPerView: 3 }
// }

const router = useRouter()
const handleDrawer = (item) => {
    sessionStorage.setItem(
        'drawer_other',
        JSON.stringify({
            prompts: item.prompts,
            source_desc: item.source_desc
        })
    )
    router.push('/app/drawing')
}
// 因为狗屎插件对大图加载慢时没有优化，所以这里每当一张图片加载以后我就调用了重新排列..
// const renderer = () => {
//     console.log('load success')
//     waterFull?.value?.renderer()
// }

const resetParams = () => {
    pager.more = true
    queryParams.page_no = 0
}

const changeCategory = (id: number | string) => {
    if (queryParams.category_id === id) return
    queryParams.category_id = id
    resetParams()
    getDrawSquareData()
}

const getCategory = async () => {
    try {
        const data = await getDrawSquareCateLists()
        cateLists.value = [{ name: '全部', id: '' }, ...data]
    } catch (error) {
        console.log('获取分类错误=>', error)
    }
}

const getDrawSquareData = async () => {
    if (pager.more) {
        queryParams.page_no += 1
    } else {
        return
    }
    pager.loading = true
    try {
        const data = await getDrawSquareLists(queryParams)
        const { lists, page_no, page_size, count } = data
        if (page_no * page_size > count) {
            pager.more = false
        }
        if (page_no == 1) {
            pager.lists = lists
        } else {
            pager.lists = [...pager.lists, ...lists]
        }
        setTimeout(() => (pager.loading = false), 500)
    } catch (error) {
        pager.loading = false
        console.log('获取绘画广场列表错误=>', error)
    }
}

// const initObserver = () => {
//     observer.value = new IntersectionObserver((entries) => {
//         console.log(entries)
//         if (entries[0].intersectionRatio) {
//             getDrawSquareData()
//         }
//     })
//     observer.value.observe(document.getElementById('observer-line'))
// }

onMounted(() => {
    // initObserver()
    getDrawSquareData()
    getCategory()
})

// onUnmounted(() => {
//     observer.value?.disconnect?.()
// })
</script>
<style lang="scss" scoped>
.active-category {
    color: white !important;
    background: var(--el-color-primary);
}
.square-wrapper {
    display: grid;
    grid-gap: 16px;
    .desc {
        line-height: 40px;
        text-align: center;
        border-top: 1px solid var(--el-border-color-lighter);
    }
    transition: 0.2s all;
    grid-template-columns: repeat(4, 1fr);
    & > div {
        transition: 0.2s all;
        margin-bottom: 10px;
        overflow: hidden;
        cursor: pointer;
        &:hover {
            box-shadow: 0 8px 16px #16037514;
            transform: translatey(-10px);
        }
        background: white;
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 8px;
    }
    img {
        width: 100%;
    }
}
.tab {
    margin-right: 14px;
    padding: 0 16px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 6px;
    color: #838a95;
    transition: all 0.4s;
}
.actived {
    border-left: 3px solid var(--el-color-primary);
}
.unactived {
    border-left: 3px solid #f8f8f8;
}

//.header {
//    .title {
//        display: inline-block;
//        font-size: 30px;
//        font-weight: bold;
//        background: -webkit-linear-gradient(90deg, #19e8b7, #00abff);
//        background: -moz-linear-gradient(90deg, #19e8b7, #00abff);
//        background: -o-linear-gradient(90deg, #19e8b7, #00abff);
//        background: linear-gradient(90deg, #19e8b7, #00abff);
//        -webkit-background-clip: text;
//        -webkit-text-fill-color: transparent;
//        -moz-background-clip: text;
//        -moz-text-fill-color: transparent;
//        -o-background-clip: text;
//        -o-text-fill-color: transparent;
//        background-clip: text;
//        text-fill-color: transparent;
//    }
//    .search {
//        :deep(.el-input) {
//            .el-input__wrapper {
//                padding-left: 20px;
//                height: 50px;
//                border-radius: 50px;
//            }
//        }
//    }
//}

.main {
    .image-payload:hover {
        .image-bg {
            transform: scale(1.1);
        }
        .image-content {
            opacity: 1;
            bottom: 0;
        }
    }
    .image-payload {
        cursor: pointer;
        overflow: hidden;
        border-radius: 12px;
        .image-bg {
            user-select: none;
            //pointer-events: none;
            transition: all 1s;
        }
        .image-content {
            transition: all 0.5s;
            opacity: 0;
            position: absolute;
            left: 0;
            right: 0;
            bottom: -10px;
            margin: 10px;
            padding: 10px;
            border-radius: 6px;
            background-color: rgba(0, 0, 0, 0.5);
        }
    }
}
</style>
